<template>
	<view class="page">
		<view class="zy_swiper">
			<view class="lunbo">
				<uv-swiper 
					:list="list" 
					keyName="urlimage" 
					height="224"
					@change="e => current1 = e.current" 
					>
					<template v-slot:indicator>
						<view class="indicator">
							<view class="indicator__dot" 
								v-for="(item, index) in list" 
								:key="index" 
								:class="[index === current1 && 'indicator__dot--active']"
							></view>
						</view>
					</template>
				</uv-swiper>
			</view>
		</view>
	    <view class="zy_notice">
	    	<view class="uni-image"></view>
			<view class="zy_roll">
				<uv-notice-bar   :icon="false" :text="text" direction="column" bgColor="#fff" :disableScroll="disableScroll" 
				 color="#000" url="/pages/art/index?articleId=12"></uv-notice-bar>
			</view>
	    </view>
		<view class="gongneng">
			<view class="homeimg_logo" v-for="(item,index) in meList" :key="index" @click="meClick(item)">
				<image  class="uni-image" :src="item.src" :mode="item.mode"></image>
				<br>
			     {{item.title}}
			</view>
			
		</view>
		<view class="biaoti">
			<view class="line_bt"></view>
			<view class="dy_wen">推荐新品</view>
			<view class="line_bt"></view>
		</view>
		<view class="typelist">
			<view class="xinpin"  v-for="(item,index) in xpList" :key="index">
				<image  class="uni-image" :src="item.src" :mode="item.mode"></image>
				<br>
				 {{item.title}}
			</view>
		</view>
		<view class="biaoti">
			<view class="line_bt"></view>
			<view class="dy_wen">臻选好物</view>
			<view class="line_bt"></view>
		</view>
		<view class="outerbox">
			<view class="innerbox" v-for="(item,index) in goodList" :key="index">
				<image  class="uni-image" :src="item.src" :mode="item.mode"></image>
				<view class="shopname">
					<text>优选</text>
					{{item.title}}
				</view>
				<view class="text_section">
					<view class="price"></view>
					<view class="newprice"></view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import {memberInfo} from '@/api/user.js';
	import {bannerList} from '@/api/index.js';
	export default {
		onLoad() {
			bannerList().then(response=>{
				this.list = response.data;
				console.log(this.list)
			});
			this.userInfoEvent()
			
			
		},
		data() {
			return {
				list:[],
				text:["公告"],
				disableScroll:true,
				current1:0,
				userInfo:{},
				meList:[
					{
						mode:"scaleToFill",
						src:'../../static/images/wdsc.png',
						title:"我的市场",
						url:'/pages/team/myteam_info'
					},
					{
						mode:"scaleToFill",
						src:'../../static/images/qianggou_a.png',
						title:"进入抢购",
						url:'/pages/index/rush'
					},
					{
						mode:"scaleToFill",
						src:'../../static/images/dingdan_in.png',
						title:"我的订单",
						url:'/pages/order/order'
					},
					{
						mode:"scaleToFill",
						src:'../../static/images/xwzx.png',
						title:"新闻咨询",
						url:'/pages/art/list'
						
					}
					
				],
				xpList:[
					{
						mode:"scaleToFill",
						src:'../../static/images/dakt.jpg',
						title:"大块头"
					},
					{
						mode:"scaleToFill",
						src:'../../static/images/sbkj.jpg',
						title:"18K金"
					},
					{
						mode:"scaleToFill",
						src:'../../static/images/bingh.jpg',
						title:"冰黄翡翠"
					},
					{
						mode:"scaleToFill",
						src:'../../static/images/zzsz.jpg',
						title:"正装手镯"
					}
					
				],
				goodList:[
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10012.jpg',
						title:"玉器"
					},
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10013.jpg',
						title:"玉器"
					},
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10014.png',
						title:"玉器"
					},
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10015.png',
						title:"五福临门"
					},
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10016.jpeg',
						title:"玉器"
					},
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10017.jpeg',
						title:"玉器"
					},
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10018.jpeg',
						title:"玉器"
					},
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10019.jpg',
						title:"玉器"
					},
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10020.jpeg',
						title:"玉鼠"
					},
					{
						mode:"scaleToFill",
						src:'../../static/img/item/10021.png',
						title:"玉器"
					},				
				
			
				]
			}
		},
		methods: {
			meClick(item){
				console.log(item,1111)
				if(item.url == '/pages/index/rush'){
					uni.switchTab({
					  url: item.url
					});
				}else{
					uni.navigateTo({
						url:item.url
					})	
				}
				
			},
			userInfoEvent: function() {
				memberInfo().then(response=>{
					if(response.code == 1 && response.data.isAuth != "normal"){
						uni.showModal({
							title: "提示",
							content: "请您立即完善实名，并且完成客户签约流程，谢谢",
							showCancel: false,
							success() {
								uni.navigateTo({
									url:"/pages/bonus/smrz"
								})
							}
						})
					}
				});
			},
		}
	}
</script>

<style>
    uni-page-body {
	    background-color: #f1f1f1;
	}
	.page{
		overflow-x:hidden;
	}
	.zy_swiper .lunbo{
		width: 100%;
		height: 224px;
		overflow:hidden;
		margin: 0 auto;
	}

	.indicator{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.indicator__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;
		
	}
	.indicator__dot--active{
		background-color: #ffffff;
	}
	.zy_notice{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		background-color: #ffffff;
		width: 100%;
		color: #333;
		padding: 20px 5px 10px 10px;
	}
	.zy_roll {
	    align-self: flex-start;
	    margin: -10px 0 0 0;
	    font-size: 14px;
	    height: 26px;
	    width: 80%;
	}
	.zy_notice .uni-image{
		width: 80px;
		height: 18px;
		background-image: url(/static/img/user/news.png);
		background-size:100% 100%;
	}
	
	.gongneng{
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		width: 95%;
		margin: auto;
		margin-top: 14px;
		background-color: #fff;
		margin-bottom: 14px;
		border-radius: 16px;
		box-shadow: 0 2px 10px #ccc;
	}
	.homeimg_logo{
	    width: 25%;
	    text-align: center;
	    line-height: 21px;
	    padding: 5px 0;
	    font-size: 14px;
	    margin-bottom: 16px;
	    margin-top: 16px;
	    font-weight: 700;
	}
	.homeimg_logo .uni-image{
	    width: 32px;
	    height: 32px;
	}
	.biaoti{
		margin-top: 16px;
		width: 100%;
		display: flex;
		margin-bottom: 10px;
		align-items: center;
		color: #e16231;
		justify-content: center;
	}
	.line_bt{
		width: 85px;
		border-top: #d66c6b solid 1px;
	}
	.dy_wen{
		margin: 0 10px 0 10px;
		font-size: 17px;
	}
	.typelist{
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		width: 95%;
		margin: auto;
		background: linear-gradient(#d66c6b, #e4a4a3, #ed6266);
		background-color: #fff;
		margin-bottom: 10px;
		box-shadow: 0 2px 10px #ccc;
		color: #b6696a;
		border-radius: 16px;
	}
	.xinpin {
	    width: 25%;
	    text-align: center;
	    line-height: 21px;
	    padding: 5px 0;
	    font-size: 14px;
	    margin-bottom: 10px;
	    margin-top: 10px;
	    color: #fff;
	}
	.xinpin .uni-image{
	    width: 64px;
	    height: 64px;
	    border-radius: 53px;
	}
	.outerbox {
	    padding-bottom: 53px;
	    justify-content: space-around;
	    display: flex;
	    flex-wrap: wrap;
	    width: 98%;
	    box-sizing: border-box;
	    margin: auto;
	}
	.innerbox {
	    background-color: #fff;
	    width: 48%;
	    border-radius: 5px;
	    margin-top: 10px;
	    box-shadow: 0 2px 10px #ccc;
	}
	.innerbox .uni-image {
	    width: 100%;
	    height: 181px;
	    border-radius: 5px 5px 0 0;
	}
	.shopname{
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    margin-left: 5px;
	}
	.shopname text {
	    background-color: #dd524d;
	    color: #fff;
	    padding: 2px;
	    font-size: 12px;
	    border-radius: 3px;
	    margin-right: 3px;
	}
	.text_section {
	    padding-left: 5px;
	    padding-top: 10px;
	    padding-bottom: 10px;
	    display: flex;
	    align-items: center;
	    color: grey;
	}
	.price {
	    display: flex;
	    align-items: center;
	}
	.newprice{
	    font-size: 12px;
	    color: #dd524d;
	}
		
</style>
